// create namespace

var ds = new Ext.data.ArrayStore({
    data: [[123, 'One Hundred Twenty Three'], ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'], ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine'], ['10', 'Nine'], ['11', 'Eleven']],
    fields: ['value', 'text'],
    sortInfo: {
        field: 'value',
        direction: 'ASC'
    }
});
Ext.namespace('pacp');

pacp.queryform = new Ext.extend(Ext.form.FormPanel, {
    baseCls: 'x-plain',
    labelWidth: 55,
    url: 'save-form.php',
    layout: {
        type: 'vbox',
        align: 'stretch' // Child items are stretched to full width
    },
    defaults: {
        xtype: 'textfield'
    },
    
    items: [{
        xtype: 'combo',
        store: ['test@example.com', 'someone-else@example.com'],
        plugins: [Ext.ux.FieldReplicator, Ext.ux.FieldLabeler],
        fieldLabel: 'Send To',
        name: 'to'
    }, {
        plugins: [Ext.ux.FieldLabeler],
        fieldLabel: 'Subject',
        name: 'subject'
    }, {
        xtype: 'textarea',
        fieldLabel: 'Message text',
        hideLabel: true,
        name: 'msg',
        flex: 1 // Take up all *remaining* vertical space
    }]
})


pacp.multiselect = new Ext.extend(Ext.form.FormPanel, {
    title: '',
    width: 700,
    bodyStyle: 'padding:10px;',
    //    renderTo: 'itemselector',
    initComponent: function(){
    
        this.isForm = this.buildWindow();
        this.items = this.isForm;
		
        pacp.multiselect.superclass.initComponent.apply(this, arguments);
    },
    //	onRender: function(){
    //		pacp.multiselect.superclass.onRender.apply(this, arguments);
    //		var itemSelector = this.items.itemAt(0);
    //		var clearBtn = new Ext.Button({
    //			text: 'Clear',
    //			handler: function(){
    //				itemSelector.reset();
    //			}
    //		});
    //		var tbar = itemSelector.getTopToolbar();
    //		tbar.add(clearBtn);
    //	},
    
    buildWindow: function(){
        var itemselector = new Ext.ux.form.ItemSelector({
            name: 'itemselector',
            fieldLabel: 'ItemSelector',
            imagePath: 'lib/dlz/images',
            multiselects: [{
                width: 250,
                height: 200,
                store: ds,
                displayField: 'text',
                valueField: 'value'
            }, {
                width: 250,
                height: 200,
                store: [['10', 'Ten']],
                tbar: [{
                    text: 'clear',
                    handler: function(){
                        this.isForm.getForm().findField('itemselector').reset();
                    },
                    scope: this
                }]
            }]
        
        
        });
        var isForm = new Ext.form.FormPanel({
            title: '',
            width: 700,
            bodyStyle: 'padding:10px;',
            items: itemselector,
			buttons: [this.buildButtons()]
        });
        
        return isForm
        
    },
    
    buildButtons: function(){
        return new Ext.Button({
            text: 'Save',
            handler: function(){
                if (this.form.isValid()) {
                    Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />' +
                    this.isForm.getForm().getValues(true));
					console.log(this.isForm.getForm().getValues());
                }
            },
            scope: this
        })
    }
    
});





